<template>
  <view class="page-container">
    <!-- 状态栏占位 -->
    <view style="background-color: white; width: 100%;height: var(--status-bar-height);"></view>

    <!-- 导航栏 -->
    <uni-nav-bar color="#000" left-icon="left" @clickLeft="navBack()" title="箱式加热炉温度监测记录">
      <view slot="right" class="nav-right-btn" @click="exportExcel()">
        <text class="export-icon">📊</text>
        <text>导出</text>
      </view>
    </uni-nav-bar>

    <scroll-view scroll-y class="content-scroll">
      <!-- 基础信息区 + 操作区 -->
      <view class="info-operation-section">
        <view class="info-card">
          <view class="card-title">
            <view class="title-icon">📋</view>
            <text>基础信息</text>
          </view>

          <view class="info-grid">
            <view class="info-item">
              <text class="info-label">实验名称</text>
              <text class="info-value">{{ historylist.name_exper }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">设备编号</text>
              <text class="info-value">{{ historylist.serialnum_equip }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">操作人员</text>
              <text class="info-value">{{ historylist.nickname_user }}</text>
            </view>
            <view class="info-item">
              <text class="info-label">实验日期</text>
              <text class="info-value">{{ formatDate(historylist.date_history) }}</text>
            </view>
          </view>

          <view class="info-desc">
            <text class="info-label">实验简介</text>
            <text class="info-value-desc">{{ historylist.info_exper }}</text>
          </view>
        </view>

        <!-- 实验进度卡片 -->
        <view class="progress-card">
          <view class="progress-title">实验进度</view>
          <view class="progress-ring">
            <view class="progress-text">
              <text class="progress-number">{{ calculateProgress() }}%</text>
              <text class="progress-label">已完成</text>
            </view>
          </view>
          <view class="time-info">
            <text class="time-label">总时长: {{ formatTime(getTotalTime()) }}</text>
          </view>
          <!-- 移动到这里的状态标签 -->
          <view class="status-badge-container">
            <text class="status-badge success">✓ 正常运行</text>
          </view>
        </view>
      </view>

      <!-- 实时监控区 -->
      <view class="monitor-section">
        <view class="section-header">
          <view class="header-left">
            <view class="header-icon">🌡️</view>
            <text class="section-title">实时温度监控</text>
          </view>
          <view class="current-status">
            <text class="status-label">当前状态:</text>
            <text class="status-value">{{ getCurrentPhase() }}</text>
          </view>
        </view>

        <!-- 温度曲线图 -->
        <view class="chart-card">
          <qiun-data-charts
              type="area"
              :eopts="opts1"
              :chartData="chartData1"
              :echartsH5="true"
              :echartsApp="true">
          </qiun-data-charts>
        </view>

        <!-- 实时数据卡片组 -->
        <view class="realtime-data">
          <view class="data-card primary">
            <view class="data-icon">📈</view>
            <view class="data-content">
              <text class="data-label">当前温度</text>
              <text class="data-value">{{ getCurrentTemp() }}℃</text>
            </view>
          </view>
          <view class="data-card">
            <view class="data-icon">🎯</view>
            <view class="data-content">
              <text class="data-label">目标温度</text>
              <text class="data-value">{{ getTargetTemp() }}℃</text>
            </view>
          </view>
          <view :class="['data-card', getTempDiffClass()]">
            <view class="data-icon">⚖️</view>
            <view class="data-content">
              <text class="data-label">温度偏差</text>
              <text class="data-value">{{ getTempDiff() }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 数据分析区 -->
      <view class="analysis-section">
        <view class="section-header">
          <view class="header-left">
            <view class="header-icon">📊</view>
            <text class="section-title">温度趋势统计</text>
          </view>
        </view>

        <!-- 关键指标卡片 -->
        <view class="metrics-grid">
          <view class="metric-card rise">
            <view class="metric-header">
              <text class="metric-icon">🔥</text>
              <text class="metric-title">升温阶段</text>
            </view>
            <text class="metric-value">{{ formatTime(getRiseTime()) }}</text>
            <text class="metric-label">平均速率: {{ getRiseRate() }}℃/min</text>
          </view>

          <view class="metric-card hold">
            <view class="metric-header">
              <text class="metric-icon">⏱️</text>
              <text class="metric-title">恒温阶段</text>
            </view>
            <text class="metric-value">{{ formatTime(getFixedTime()) }}</text>
            <text class="metric-label">波动范围: ±0.5℃</text>
          </view>

          <view class="metric-card cool">
            <view class="metric-header">
              <text class="metric-icon">❄️</text>
              <text class="metric-title">降温阶段</text>
            </view>
            <text class="metric-value">{{ formatTime(getReduceTime()) }}</text>
            <text class="metric-label">平均速率: {{ getCoolRate() }}℃/min</text>
          </view>
        </view>

        <!-- 时间占比环形图 -->
        <view class="chart-card small">
          <qiun-data-charts
              type="ring"
              :eopts="opts2"
              :chartData="chartData2"
              :echartsH5="true"
              :echartsApp="true">
          </qiun-data-charts>
        </view>
      </view>

      <!-- 异常日志区(如有异常) -->
      <view class="alert-section" v-if="hasAnomalies()">
        <view class="alert-card warning">
          <view class="alert-header">
            <text class="alert-icon">⚠️</text>
            <text class="alert-title">异常提示</text>
          </view>
          <view class="alert-content">
            <text class="alert-text">• 10:35 温度偏差超过±2℃(检测值: +2.3℃)</text>
            <text class="alert-text">• 建议检查加热元件工作状态</text>
          </view>
        </view>
      </view>

    </scroll-view>
  </view>
</template>

<script>
import {_serialnumGetHistory, _exportExcel, _searchTime} from '@/service/history.js'
import {mapState, mapMutations} from 'vuex';
import SeniorTable from '@/components/data-table/senior-table.vue'
import QiunDataCharts from "../../uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue";
import UniNavBar from "@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue";

export default {
  components: {
    UniNavBar,
    QiunDataCharts,
    SeniorTable
  },
  computed: {
    ...mapState(['hasLogin', 'userInfo', 'accountNum'])
  },
  data() {
    return {
      serialnum_history: '',
      historylist: {
        historys: {
          series: [{data: []}, {data: []}],
          categories: [],
          total_time: 0,
          rise_time: 0,
          fixed_time: 0,
          reduce_time: 0
        }
      },
      startDate: '',
      endDate: '',
      chartData1: {},
      opts1: {
        color: ['#2196F3', '#4CAF50'],
        title: {
          show: true,
          text: '温度变化曲线 (℃/S)',
          left: 'center',
          textStyle: {
            fontSize: 14,
            fontWeight: 'bold',
            color: '#333'
          }
        },
        legend: {
          show: true,
          top: 30,
          right: 20,
          itemWidth: 20,
          itemHeight: 12,
          textStyle: {
            fontSize: 12
          },
          selectedMode: false
        },
        grid: [{
          left: "8%",
          right: "5%",
          bottom: "22%",
          top: "22%",
          containLabel: true
        }],
        xAxis: {
          show: true,
          type: 'category',
          boundaryGap: false,
          axisTick: {
            show: true,
            alignWithLabel: true
          },
          axisLine: {
            lineStyle: {
              color: '#E0E0E0'
            }
          },
          axisLabel: {
            color: '#666',
            fontSize: 11,
            interval: function(index, value) {
              // 动态计算间隔，根据数据点数量自动调整
              const dataLength = this.chartData1?.categories?.length || 60;
              if (dataLength <= 20) return 0; // 显示所有标签
              if (dataLength <= 40) return 1; // 每隔1个显示
              if (dataLength <= 60) return 2; // 每隔2个显示
              return 4; // 数据很多时每隔4个显示
            },
            rotate: 0,
            hideOverlap: true
          }
        },
        yAxis: {
          show: true,
          type: 'value',
          name: '温度(℃)',
          nameTextStyle: {
            color: '#666',
            fontSize: 11
          },
          splitNumber: 5,
          scale: true,
          min: function(value) {
            return Math.floor(value.min - 5);
          },
          max: function(value) {
            return Math.ceil(value.max + 10);
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#F5F5F5',
              type: 'dashed'
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#E0E0E0'
            }
          },
          axisLabel: {
            color: '#666',
            fontSize: 11
          }
        },
        dataZoom: [{
          type: 'inside',
          preventDefaultMouseMove: true,
          minValueSpan: 10,
          maxValueSpan: 100
        }, {
          type: 'slider',
          height: "12%",
          bottom: "5%",
          brushSelect: false,
          borderColor: '#E0E0E0',
          fillerColor: 'rgba(33, 155, 135, 0.15)',
          handleStyle: {
            color: '#219B87'
          },
          dataBackground: {
            lineStyle: {
              color: '#219B87',
              opacity: 0.5
            },
            areaStyle: {
              color: '#219B87',
              opacity: 0.2
            }
          },
          selectedDataBackground: {
            lineStyle: {
              color: '#219B87'
            },
            areaStyle: {
              color: '#219B87',
              opacity: 0.3
            }
          }
        }],
        tooltip: {
          trigger: 'axis',
          confine: true,
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          formatter: function (params) {
            let result = params[0].name + '<br/>';
            params.forEach(function (item, index) {
              const diff = params.length > 1 && item.seriesIndex === 1
                  ? (item.value - params[0].value).toFixed(1)
                  : '';
              result += item.marker + item.seriesName + ': ' + item.value + '℃';
              if (diff) {
                result += ' (' + (diff > 0 ? '+' : '') + diff + '℃)';
              }
              result += '<br/>';
            });
            return result;
          }
        }
      },
      chartData2: {},
      opts2: {
        color: ['#FF6B6B', '#4ECDC4', '#45B7D1'],
        legend: {
          show: true,
          top: "bottom",
          left: "center",
          orient: 'horizontal',
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 20,
          bottom: 5,
          textStyle: {
            fontSize: 11
          }
        },
        title: {
          text: "各阶段时间占比",
          left: 'center',
          top: 1,
          textStyle: {
            fontSize: 13,
            fontWeight: 'bold',
            color: '#333'
          }
        },
        grid: {
          top: 60,
          bottom: 50,
          left: 10,
          right: 10
        },
        series: [{
          type: 'pie',
          radius: ['28%', '45%'],
          center: ['50%', '52%'],
          avoidLabelOverlap: true,
          minAngle: 5,
          label: {
            show: true,
            position: 'outside',
            fontSize: 10,
            formatter: '{b}\n{d}%',
            overflow: 'truncate',
            lineHeight: 15,
            alignTo: 'labelLine',
            distanceToLabelLine: 5,
            padding: [2, 4]
          },
          labelLayout: {
            hideOverlap: true,
            moveOverlap: 'shiftY'
          },
          labelLine: {
            show: true,
            length: 25,
            length2: 12,
            smooth: false,
            lineStyle: {
              width: 1,
              type: 'solid'
            }
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 12,
              fontWeight: 'bold'
            },
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
    }
  },
  onLoad: function (res) {
    const self = this;
    uni.getSystemInfo({
      success: function (sysRes) {
        const scale = sysRes.windowWidth / 407;
        self.opts1.title.textStyle.fontSize = 14 * scale;
        self.opts2.title.textStyle.fontSize = 13 * scale;
      }
    });
    this.serialnum_history = res.serialnum_history;
    setTimeout(function () {
      self.getExperAllData();
    }, 500);
    this.searchTime();
  },

  methods: {
    ...mapMutations(['login', 'isSetExper', 'logoutExper']),

    navBack: function () {
      uni.navigateBack();
    },

    getExperAllData: function () {
      const self = this;
      let data = {
        serialnum_history: this.serialnum_history
      };
      _serialnumGetHistory(data).then(function (res) {
        self.historylist = res.data;

        // 温度曲线数据
        let res2 = {
          categories: res.data.historys.categories,
          series: [
            {
              name: "预期温度",
              lineStyle: {
                type: 'dashed',
                width: 2
              },
              smooth: true,
              symbol: 'circle',
              symbolSize: 6,
              showSymbol: true,
              label: {
                show: true,
                position: 'top',
                fontSize: 10,
                color: '#2196F3',
                formatter: '{c}',
                distance: 5
              },
              data: res.data.historys.series[0].data
            },
            {
              name: "实际温度",
              lineStyle: {
                width: 3
              },
              smooth: true,
              symbol: 'circle',
              symbolSize: 6,
              showSymbol: true,
              areaStyle: {
                opacity: 0.3
              },
              label: {
                show: true,
                position: 'top',
                fontSize: 10,
                color: '#4CAF50',
                formatter: '{c}',
                distance: 8
              },
              data: res.data.historys.series[1].data
            }
          ]
        };
        self.chartData1 = JSON.parse(JSON.stringify(res2));

        // 时间占比数据
        let res1 = {
          series: [{
            data: [
              {
                "name": "升温",
                "value": res.data.historys.rise_time
              },
              {
                "name": "恒温",
                "value": res.data.historys.fixed_time
              },
              {
                "name": "降温",
                "value": res.data.historys.reduce_time
              }
            ]
          }]
        };
        self.chartData2 = JSON.parse(JSON.stringify(res1));
      });
    },

    formatDate: function (dateString) {
      if (!dateString) return '';
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return year + '-' + month + '-' + day;
    },

    formatTime: function (seconds) {
      if (!seconds) return '0分钟';
      const mins = (seconds / 60).toFixed(1);
      return mins + '分钟';
    },

    getTotalTime: function () {
      return this.historylist.historys ? this.historylist.historys.total_time : 0;
    },

    getRiseTime: function () {
      return this.historylist.historys ? this.historylist.historys.rise_time : 0;
    },

    getFixedTime: function () {
      return this.historylist.historys ? this.historylist.historys.fixed_time : 0;
    },

    getReduceTime: function () {
      return this.historylist.historys ? this.historylist.historys.reduce_time : 0;
    },

    calculateProgress: function () {
      const total = this.getTotalTime();
      return total > 0 ? 100 : 0;
    },

    getCurrentPhase: function () {
      return '实验已完成';
    },

    getCurrentTemp: function () {
      if (!this.historylist.historys || !this.historylist.historys.series[1]) {
        return '--';
      }
      const data = this.historylist.historys.series[1].data;
      return data && data.length > 0 ? data[data.length - 1] : '--';
    },

    getTargetTemp: function () {
      if (!this.historylist.historys || !this.historylist.historys.series[0]) {
        return '--';
      }
      const data = this.historylist.historys.series[0].data;
      return data && data.length > 0 ? data[data.length - 1] : '--';
    },

    getTempDiff: function () {
      const current = parseFloat(this.getCurrentTemp());
      const target = parseFloat(this.getTargetTemp());
      if (isNaN(current) || isNaN(target)) return '--';
      const diff = (current - target).toFixed(1);
      return (diff > 0 ? '+' : '') + diff + '℃';
    },

    getTempDiffClass: function () {
      const diffStr = this.getTempDiff();
      if (diffStr === '--') return '';
      const diff = parseFloat(diffStr);
      if (isNaN(diff)) return '';
      if (Math.abs(diff) > 2) return 'warning';
      return 'normal';
    },

    getRiseRate: function () {
      const time = this.getRiseTime();
      if (time <= 0) return '--';
      return (80 / (time / 60)).toFixed(1);
    },

    getCoolRate: function () {
      const time = this.getReduceTime();
      if (time <= 0) return '--';
      return (50 / (time / 60)).toFixed(1);
    },

    hasAnomalies: function () {
      return false;
    },

    searchTime: function () {
      const self = this;
      let data = {
        serialnum_history: this.serialnum_history
      };
      _searchTime(data).then(function (res) {
        if (res.flag) {
          self.startDate = res.data.startDate;
          self.endDate = res.data.endDate;
        }
      });
    },

    onPullDownRefresh: function () {
      setTimeout(function () {
        uni.stopPullDownRefresh();
      }, 1000);
    },

    exportExcel: function () {
      const self = this;
      uni.showModal({
        cancelColor: '#999',
        cancelText: '取消',
        confirmColor: '#219B87',
        confirmText: '确定',
        title: '导出数据',
        content: '是否确定将本次实验数据导出为Excel表格?',
        success: function (res) {
          if (res.confirm) {
            let url = 'http://43.142.102.167:8088/historys/export?serialnum_history=' + self.serialnum_history;
            //#ifdef H5
            window.location.href = url;
            //#endif
            //#ifdef APP-PLUS
            plus.runtime.openURL(url);
            //#endif
          }
        }
      });
    }
  }
}
</script>

<style scoped lang="scss">
.page-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
}

.content-scroll {
  height: calc(100vh - var(--status-bar-height) - 44px);
}

.nav-right-btn {
  display: flex;
  align-items: center;
  gap: 8rpx;
  color: #219B87;
  font-size: 28rpx;
  font-weight: 500;

  .export-icon {
    font-size: 32rpx;
  }
}

.info-operation-section {
  display: flex;
  gap: 20rpx;
  padding: 20rpx;
}

.info-card {
  flex: 1;
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);
}

.card-title {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 24rpx;
  font-size: 32rpx;
  font-weight: 600;
  color: #1a1a1a;

  .title-icon {
    font-size: 36rpx;
  }
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24rpx 16rpx;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.info-label {
  font-size: 24rpx;
  color: #999;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
}

.info-desc {
  margin-top: 24rpx;
  padding-top: 24rpx;
  border-top: 1rpx solid #f0f0f0;

  .info-label {
    display: block;
    margin-bottom: 12rpx;
  }

  .info-value-desc {
    display: block;
    font-size: 26rpx;
    color: #555;
    line-height: 1.8;
    padding: 12rpx;
    background: #f8f9fa;
    border-radius: 8rpx;
  }
}

.progress-card {
  width: 280rpx;
  background: linear-gradient(135deg, #219B87 0%, #1a7a6a 100%);
  border-radius: 16rpx;
  padding: 24rpx;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 8rpx 24rpx rgba(33, 155, 135, 0.3);
  position: relative;
}

.progress-title {
  font-size: 26rpx;
  opacity: 0.9;
  margin-bottom: 20rpx;
}

.progress-ring {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
}

.progress-text {
  text-align: center;
}

.progress-number {
  display: block;
  font-size: 48rpx;
  font-weight: bold;
}

.progress-label {
  display: block;
  font-size: 22rpx;
  opacity: 0.8;
  margin-top: 4rpx;
}

.time-info {
  margin-bottom: 16rpx;

  .time-label {
    font-size: 24rpx;
    opacity: 0.9;
  }
}

.status-badge-container {
  margin-top: auto;
  padding-top: 16rpx;
  border-top: 1rpx solid rgba(255, 255, 255, 0.3);
  width: 100%;
  display: flex;
  justify-content: center;
}

.status-badge {
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  font-weight: 500;

  &.success {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    border: 1rpx solid rgba(255, 255, 255, 0.4);
  }
}

.monitor-section {
  margin: 0 20rpx 20rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.header-icon {
  font-size: 36rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1a1a1a;
}

.current-status {
  display: flex;
  align-items: center;
  gap: 8rpx;

  .status-label {
    font-size: 24rpx;
    color: #999;
  }

  .status-value {
    font-size: 26rpx;
    color: #219B87;
    font-weight: 500;
  }
}

.chart-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  height: 600rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);
  margin-bottom: 20rpx;

  &.small {
    height: 580rpx;
  }
}

.realtime-data {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16rpx;
}

.data-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

  &.primary {
    background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
    color: #fff;
    box-shadow: 0 4rpx 16rpx rgba(33, 150, 243, 0.3);

    .data-label, .data-value {
      color: #fff;
    }
  }

  &.warning {
    border: 2rpx solid #FF9800;
  }

  &.normal {
    border: 2rpx solid #4CAF50;
  }
}

.data-icon {
  font-size: 32rpx;
}

.data-content {
  text-align: center;
}

.data-label {
  display: block;
  font-size: 22rpx;
  color: #999;
  margin-bottom: 8rpx;
}

.data-value {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.analysis-section {
  margin: 0 20rpx 20rpx;
}

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16rpx;
  margin-bottom: 20rpx;
}

.metric-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  border-left: 4rpx solid;

  &.rise {
    border-left-color: #FF6B6B;
  }

  &.hold {
    border-left-color: #4ECDC4;
  }

  &.cool {
    border-left-color: #45B7D1;
  }
}

.metric-header {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-bottom: 12rpx;
}

.metric-icon {
  font-size: 28rpx;
}

.metric-title {
  font-size: 24rpx;
  color: #666;
}

.metric-value {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #1a1a1a;
  margin-bottom: 8rpx;
}

.metric-label {
  display: block;
  font-size: 22rpx;
  color: #999;
}

.alert-section {
  margin: 0 20rpx 20rpx;
}

.alert-card {
  background: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

  &.warning {
    border-left: 4rpx solid #FF9800;
    background: #FFF8E1;
  }
}

.alert-header {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 16rpx;
}

.alert-icon {
  font-size: 32rpx;
}

.alert-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #F57C00;
}

.alert-content {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.alert-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}
</style>